<template>
  <div class="qrLogin">
    <!-- 二维码登录页面 -->
      <div class="qrArea" v-loading="loading">
        <img :src="qrImg" alt="" width="200px">
        <!-- <img src="" alt="" class="lost"> -->
        <i class="mask" v-if="showQrMask" :style="maskBg" @click="updataQr"></i>
      </div>
      <p >
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-weixin"></use>
        </svg>
        <b>请使用手机微信扫码登陆</b>
      </p>
      <!-- <span disable="false"> 二维码失效,请点击刷新二维码</span> -->
  </div>
</template>

<script>
//引入socket.io
import socketIo from "socket.io-client"

//引入qrcode
import qrcode from "qrcode"

//引入api
import * as api from "@/api/users"

//引入成功和失败扫码遮罩图
import invalidImg from "@/assets/video/lapseQr.png"
import scanSuccessImg from "@/assets/video/scancode.png"  //扫码成功未添加，需要找一下修改

// 引入storage
import storage from "@/utils/storage"

export default {
  props:{
    storageUserInfo:{
        required:true
    }
  },
  created(){
    // console.log(this.storageUserInfo)
    //建立socket连接
    let io = socketIo('wss://chst.vip')
    //监听连接的事件
    io.on('connectSuccess',async({sid})=>{
      // 将sid存入本地
      storage.set('qr_sid',sid)
      // 首次调用
      this.getQrUrl(sid)
     
    })
      //二维码无效
    io.on("invalidCode",data=>{
      // console.log(data)
      //显示无效二维码时遮罩样式
      this.maskBg.backgroundImage = `url(${invalidImg} )`
      //展示遮罩
      this.showQrMask = true
    })
     // 扫码成功
     io.on('scancodeSuccess',async ({state,wechatCode}) =>{
      // console.log(data)
      //修改遮罩背景
      this.maskBg.backgroundImage =  `url(${scanSuccessImg} )`;
      //扫 码成功，展示遮罩
      this.showQrMask = true;
        if(state){
          //调用微信登入的接口
         let res =  await api.wechatLoginApi(wechatCode);
        //  将内容存到本地
        this.storageUserInfo(res.data)
        // 跳转页面
        this.$router.push("/")
         console.log(res)
        }else{
          console.log(msg)
        }
     })
  },
  methods:{
      async  getQrUrl(sid){
        //开启等待加载动画
        this.loading = true;
        // 请求获取二维码地址 
       let res =  await api.getQrCodeApi(sid)
      //  console.log(res)
       let {scanCodeUrl:qrcodeUrl} = res.data;
       //通过qrcode插件，生成二维码
       qrcode.toDataURL(qrcodeUrl,(err,img)=>{
        if(err){
          throw err
        }
        // console.log(img)
        this.qrImg = img;
        //关闭遮罩
        this.showQrMask = false;
        //关闭等待加载动画
        this.loading = false;
       })
       },
       //更新二维码地址
       updataQr(){
        //获取本地存储的sid
        let sid = storage.get('qr_sid')
        // console.log(sid)
        this.getQrUrl(sid)
       }
  },
    data(){
      return{
        //二维码图片
        qrImg:"",
        //是否显示遮罩
        showQrMask:false,
        //背景遮罩样式
        maskBg:{backgroundImage:`url(${invalidImg} )`},  // 二维码失效:url十个字符串，字符串中有动态的，所以要用反字符串
        // maskInvalid:{background:url(scanSuccessImg )}    // 扫码成功

        //声明一个属性控制加载动画
        loading:false
      }
    }
}
</script>



<style lang="less" scoped>
// 修改element-ui的样式，
// 1.打开调试器，找准类名，覆盖样式
// 2.看权重，使用！important或者自己计算权重
// 3.使用深度选择器，>>>或者/deep/或者v::deep
  .qrLogin{  
    // background: rgba(226, 131, 163, 0.3);
    // border:1px solid rgba(0, 0, 0, .3);
    border-radius: 8px;
    width: 100%;
    height: 500px;
    display: flex;
    align-items:center;
    justify-content: center;
    flex-direction: column;
    color:#fff;
    .qrArea{
      width: 200px;
      height: 200px;
      background-image: url(./../../assets/video/qr.png);
      background-size: contain;
      i{
        width:200px;
        height: 200px;
        display: block;
        position: absolute;
        top:174px;
        background-color: #fff;
        opacity:0.8;
        background-size: 70%;
        background-repeat: no-repeat;
        background-position: 50%;
        cursor: pointer;
      }
    }

    p{
      font-size: 16px;
      text-align: center;
    }

}
</style>
